<template>
	<view class="editPassword">
		<navBar title="修改密码" goBackUrl="/pages/myself/index" @goBack="goBack"></navBar>
		<view class="content">
			<uni-forms ref="form" :rules="rules" :modelValue="form" validateTrigger="bind">
				<uni-forms-item label="旧密码: " required name="usedPassword">
					<uni-easy-input v-model="form.usedPassword" placeholder="请输入旧密码" type="password"  />
				</uni-forms-item>
				<uni-forms-item label="新密码: " required name="newPassword">
					<uni-easy-input v-model="form.newPassword" placeholder="请输入新密码" type="password"  />
				</uni-forms-item>
				<uni-forms-item label="确认密码: " required name="confirmPassword">
					<uni-easy-input v-model="form.confirmPassword" placeholder="请输入确认密码" type="password"  />
				</uni-forms-item>
			</uni-forms>
			<u-button type="primary" class="button" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	import { updatePassword } from '@/api/system/person'
	import uniEasyInput from '../components/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
	export default {
		components:{
			uniEasyInput
		},
		data() {
			// 使用正则表达式匹配密码规则
			const passwordRegex = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*()\-+.,\/:;"<>=?@[\]{}_`|~]).{8,}$/;
			return {
				loading: false,
				form: {
					usedPassword: "",   // 旧密码
					newPassword: "",   	// 新密码,
					confirmPassword: "",  // 确认密码
				},
				rules: {
					usedPassword: {
						rules: [{
								required: true,
								errorMessage: '请输入旧密码',
							},{validateFunction: function(rule,value,data,callback){
									if(!value){
										callback('请输入旧密码')
									}
									return true
								}
						}
						]
					},
					newPassword: {
						rules: [{
								required: true,
								errorMessage: '请输入新密码',
							},{validateFunction: function(rule,value,data,callback){
									if(!passwordRegex.test(value)){
										callback('密码长度应在8位以上,包括数字,大小字母和特殊符号的组合')
									}
									return true
								}
						}]
					},
					confirmPassword: {
						rules: [{
								required: true,
								errorMessage: '请输入确认密码',
							},{
								validateFunction: function(rule,value,data,callback){
									if(value !== data.newPassword){
										callback('两次输入密码不一致')
									}
									return true
								}
						}]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods:{
			submit(){
				this.$refs.form.validate().then(res=>{
					console.log('表单数据信息：', res);
					if(this.loading) return
					this.loading = true
					updatePassword({
					  originPassword: this.form.usedPassword,
					  currentPassword: this.form.confirmPassword
					}).then(rs=>{
						uni.showToast({
							title: rs.message,
							icon: "none"
						})
						if(rs.success){
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/myself/index"
								})
							},1700)
						}
						
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				}).finally(() => {
					this.loading = false
				})
			},
			
			goBack(url){
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 0rpx 45rpx;
		.button{
			margin-top: 100rpx;
		}
	}
	/deep/ .uni-error-message {
		width: 100%;
		padding-left: 90rpx !important;
	}
	.editPassword {
		/* #ifdef MP-WEIXIN */
			padding-top: 200rpx;
		/* #endif */
	}
</style>